<template>
  <PageWrapper title="引导页" content="用于给用户的指引操作">
    <a-button type="primary" @click="handleOpen(true)">Tour 漫游式引导</a-button>
    <a-tour v-model:current="current" :open="open" :steps="steps" @close="handleOpen(false)" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import type { TourProps } from 'ant-design-vue';
  import { PageWrapper } from '@/components/Page';
  import { Tour as ATour } from 'ant-design-vue';

  const open = ref<boolean>(false);

  const current = ref(0);
  const steps: TourProps['steps'] = [
    {
      title: '展开/收起菜单',
      description: '点击按钮可展开或收起菜单',
      target: () => document.getElementById('header-trigger')!,
    },
    {
      title: '菜单搜索',
      description: '通过关键字快速、准确的找到并打开菜单',
      target: () => document.getElementById('app-search')!,
    },
    {
      title: '用户信息',
      description: '包含个人中心、消息、锁定屏幕、退出系统、登录密码等',
      target: () => document.getElementById('header-user-dropdown')!,
    },
    {
      title: '偏好设置',
      description: '自定义主题、页面功能、页面显示动画',
      target: () => document.getElementById('setting-drawer')!,
    },
  ];

  const handleOpen = (val: boolean): void => {
    current.value = 0;
    open.value = val;
  };
</script>
